<template>
  <!-- 弹框 -->
  <el-dialog title="详细信息" v-model="dialogVisible" width="50%" :before-close="handleClose">
    <!-- 描述列表 -->
    <el-scrollbar height="600px">
      <el-descriptions class="margin-top" title="" :column="2" border>
        <el-descriptions-item
          v-for="item in descriptionsList"
          :key="item.label"
          :label="item.label"
        >
          <template v-if="item?.imageUrl">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.imageUrl"
              :preview-src-list="[item.imageUrl]"
            />
          </template>
          <template v-else-if="item?.tag">
            <el-tag v-for="tag in item.value" :key="tag" type="primary" class="mr-2">
              {{ tag }}
            </el-tag>
          </template>
          <template v-else>
            <span v-if="item.value != '[]'">{{ item.value }}</span>
          </template>
        </el-descriptions-item>
      </el-descriptions>
    </el-scrollbar>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import {
  COMPANY_PROPERTY_ENUM,
  EMPLOYEE_PROPERTY_ENUM,
  SUBJECT_TYPE_ENUM_ALL_OBJECT,
} from "@/utils/enums/system";

const emit = defineEmits(["update:visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  row: {
    type: Object,
    default: () => {},
  },
  type: {
    type: String,
    default: "company",
  },
});
const dialogVisible = ref(props.visible);

// 关闭弹框的逻辑
const handleClose = () => {
  dialogVisible.value = false;
  emit("update:visible", false);
};
const descriptionsList = ref([]);
const isJson = (str) => {
  try {
    JSON.parse(str);
    return true; // 如果解析成功，说明是有效的 JSON
  } catch (e) {
    return false; // 如果解析失败，说明不是有效的 JSON
  }
};
const handleCompanyDetail = () => {
  let list = props.type === "company" ? COMPANY_PROPERTY_ENUM : EMPLOYEE_PROPERTY_ENUM;
  descriptionsList.value = list.map((item) => {
    let one = {
      label: item.label,
      value: props?.row?.[item.fieldName],
    };
    // 如果是tag item.tag == true
    if (item.tag && !!props?.row?.[item.fieldName]) {
      one.value = props?.row?.[item.fieldName].split(",");
      one.tag = true;
    }
    // 如果是图片item.image == true
    if (item.image && !!props?.row?.[item.fieldName]) {
      const images = JSON.parse(props?.row?.[item.fieldName] || "[]");
      one.imageUrl = (images.length > 0 && images[0].url) || "";
    }
    // 特殊处理
    if (item.fieldName === "idCardValidity" && isJson(props?.row?.[item.fieldName])) {
      let idCardValidity = JSON.parse(props?.row?.[item.fieldName]);
      one.value = idCardValidity.join("至");
    }
    if (item.fieldName === "subjectType") {
      one.value = "家居建材";// 目前是写死的
    }
    return one;
  });
  //     {
  //         label: '主体类型',
  //         value: props?.row?.subjectType
  //     },
  //     {
  //         label: '统一社会信用代码',
  //         value: props?.row?.unifiedSocialCredit
  //     },
  //     {
  //         label: '公司名称',
  //         value: props?.row?.companyName
  //     },
  //     {
  //         label: '营业执照住所',
  //         value: props?.row?.businessAddress,
  //         image: true,
  //     },
  //     {
  //         label: '营业期限',
  //         value: props?.row?.licenseValidity
  //     },
  //     {
  //         label: '法人代表归属地',
  //         value: props?.row?.legalRepresentative
  //     },
  //     {
  //         label: '身份证类型',
  //         value: props?.row?.idType
  //     },
  //     {
  //         label: '身份证图片',
  //         value: props?.row?.idImage,
  //         image: true,
  //     },
  //     {
  //         label: '法人代表姓名',
  //         value: props?.row?.legalRepresentative
  //     },
  //     {
  //         label: '法人身份证号码',
  //         value: props?.row?.idNumber
  //     },
  //     {
  //         label: '身份证有效期',
  //         value: props?.row?.idCardValidity
  //     },
  //     {
  //         label: '业务负责人姓名',
  //         value: props?.row?.businessContactName
  //     },
  //     {
  //         label: '业务负责人手机号',
  //         value: props?.row?.businessContactPhone
  //     },
  //     {
  //         label: '营业执照文件路径',
  //         value: props?.row?.businessLicenseFile,
  //         image: true,
  //     },
  //     {
  //         label: '经营许可文件路径',
  //         value: props?.row?.businessPermitFile,
  //         image: true,
  //     },
  //     {
  //         label: '商标或品牌授权文件路径',
  //         value: props?.row?.brandAuthorizationFile,
  //         image: true,
  //     },
  //     {
  //         label: '法人代表身份证正面文件路径',
  //         value: props?.row?.idCardFrontFile,
  //         image: true,
  //     },
  //     {
  //         label: '法人代表身份证反面文件路径',
  //         value: props?.row?.idCardBackFile,
  //         image: true,
  //     },
  //     {
  //         label: '法人授权书文件路径',
  //         value: props?.row?.legalAuthorizationFile,
  //         image: true,
  //     },
  //     {
  //         label: '资质证明文件路径',
  //         value: props?.row?.qualificationProofFile,
  //         image: true,
  //     },
  //     {
  //         label: '商圈名称',
  //         value: props?.row?.mallName
  //     },
  // ];
};
watchEffect(() => {
  dialogVisible.value = props.visible;
  handleCompanyDetail();
});
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}
</style>
